<template>
  <div>
    <!--1.视图-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="农作物名称">
        <el-input v-model="formInline.name" placeholder="农作物名称"></el-input>
      </el-form-item>
      <el-form-item label="状态" >
        <el-select v-model="formInline.status" placeholder="请选择状态" clearable>
          <el-option label="种植中" value="0"></el-option>
          <el-option label="记录完成" value="1"></el-option>
          <el-option label="成熟" value="2"></el-option>
          <el-option label="入库" value="3"></el-option>
          <el-option label="运输" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="openAdd">添加</el-button>
        <el-button type="primary" @click="excels">excel导出</el-button>
        <el-button type="primary" @click="dr">excel导入</el-button>
      </el-form-item>
      <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8100/service/dr"
          multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="cropId"
          label="序号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="cropEncoding"
          label="编码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="name"
          label="农作物名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="pname"
          label="种植基地"
          width="120">
      </el-table-column>
      <el-table-column
          prop="uname"
          label="农户"
          width="300">
      </el-table-column>
      <el-table-column
          label="图片"
          width="120">
        <template v-slot="s">
          <el-image
            style="width: 100px;height: 100px"
          :src="s.row.img">

          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop=""
          label="地址"
          width="120">
        <template v-slot="s">
          {{s.row.provinceName}}-{{s.row.cityName}}-{{s.row.districtName}}
        </template>
      </el-table-column>
      <el-table-column
          prop="mname"
          label="种植方式"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createBy"
          label="创建人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="120">
        <template v-slot="sp">
          <el-tag v-if="sp.row.status ==0 ">种植中</el-tag>
          <el-tag v-if="sp.row.status ==1 ">记录完成</el-tag>
          <el-tag v-if="sp.row.status ==2 ">成熟</el-tag>
          <el-tag v-if="sp.row.status ==3 ">入库</el-tag>
          <el-tag v-if="sp.row.status ==4 ">运输</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="coverArea"
          label="占地"
          width="120">
      </el-table-column>
      <el-table-column
          prop="output"
          label="产量"
          width="120">
      </el-table-column>
      <el-table-column
          prop="isquality"
          label="是否质检"
          width="120">
        <template slot-scope="sco">
          <el-popover placement="top">
            <div slot="reference" class="name-warpper">
              <el-tag size="medium">{{sco.row.isquality =="0"?"未质检":"已质检"}}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="openAdd2(scope.row.cropId)" type="text" size="small">生长记录</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="gopage"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="农作物名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="种植基地" :label-width="formLabelWidth">
          <el-select v-model="form.plantationId" placeholder="请选择种植基地">
            <el-option
                v-for="item in pids"
                :key="item.plantationId"
                :label="item.name"
                :value="item.plantationId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="农户" :label-width="formLabelWidth">
          <el-select v-model="form.userId" placeholder="请选择农户">
            <el-option
                v-for="item in uids"
                :key="item.userId"
                :label="item.uname"
                :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8100/service/img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="省市区" :label-width="formLabelWidth">
          <el-cascader
              v-model="areaIds"
              :options="options"
              :props="props"
              @change="getchange"
              clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="种植方式" :label-width="formLabelWidth">
          <el-select v-model="form.plantingMethodId" placeholder="请选择农户">
            <el-option
                v-for="item in pmid"
                :key="item.plantingMethodId"
                :label="item.mname"
                :value="item.plantingMethodId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form.createBy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form.status">
            <el-radio label="0" value="0">种植中</el-radio>
            <el-radio label="1" value="1">记录完成</el-radio>
            <el-radio label="2" value="2">成熟</el-radio>
            <el-radio label="3" value="3">入库</el-radio>
            <el-radio label="4" value="4">运输</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="占地(亩)" :label-width="formLabelWidth">
          <el-input v-model="form.coverArea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产量" :label-width="formLabelWidth">
          <el-input v-model="form.output" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否质检" :label-width="formLabelWidth">
          <el-radio-group v-model="form.isquality">
            <el-radio label="0" value="0">已质检</el-radio>
            <el-radio label="1" value="1">未质检</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-select v-model="form.plantationIds" multiple placeholder="请选择">
          <el-option
              v-for="item in plantations"
              :key="item.plantationId"
              :label="item.name"
              :value="item.plantationId">
          </el-option>
        </el-select>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="农作物名称"  :label-width="formLabelWidth">
          <el-input v-model="form1.name" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="种植基地" :label-width="formLabelWidth">
          <el-select v-model="form1.plantationId" placeholder="请选择种植基地">
            <el-option
                v-for="item in pids"
                :key="item.plantationId"
                :label="item.name"
                :value="item.plantationId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="农户" :label-width="formLabelWidth">
          <el-select v-model="form1.userId" placeholder="请选择农户">
            <el-option
                v-for="item in uids"
                :key="item.userId"
                :label="item.uname"
                :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8100/service/img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="省市区" :label-width="formLabelWidth">
          <el-cascader
              v-model="areaIds"
              :options="options"
              :props="props"
              @change="getchange"
              clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="种植方式" :label-width="formLabelWidth">
          <el-select v-model="form1.plantingMethodId" placeholder="请选择农户">
            <el-option
                v-for="item in pmid"
                :key="item.plantingMethodId"
                :label="item.mname"
                :value="item.plantingMethodId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" :label-width="formLabelWidth">
          <el-input v-model="form1.createBy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form1.status">
            <el-radio label=0 >种植中</el-radio>
            <el-radio label=1>记录完成</el-radio>
            <el-radio label="2" >成熟</el-radio>
            <el-radio label="3" >入库</el-radio>
            <el-radio label="4" >运输</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="占地(亩)" :label-width="formLabelWidth">
          <el-input v-model="form1.coverArea" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产量" :label-width="formLabelWidth">
          <el-input v-model="form1.output" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否质检" :label-width="formLabelWidth">
          <el-radio-group v-model="form1.isquality">
            <el-radio   label=0 >已质检</el-radio>
            <el-radio  label=1 >未质检</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upload">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="生长记录" :visible.sync="dialogFormVisible2">
      <el-form :model="form2">
        <el-form-item label="温度" :label-width="formLabelWidth">
          <el-input v-model="form2.temperature" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生长情况" :label-width="formLabelWidth">
          <el-input v-model="form2.growCondition" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="水分" :label-width="formLabelWidth">
          <el-input v-model="form2.hydration" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="光照" :label-width="formLabelWidth">
          <el-input v-model="form2.illumination" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="施肥" :label-width="formLabelWidth">
          <el-input v-model="form2.fertilize" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否成熟" :label-width="formLabelWidth">
          <el-radio-group v-model="form2.ismature">
            <el-radio   label="0">未成熟</el-radio>
            <el-radio  label="1" >已成熟</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生长记录的图片" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8100/service/img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form2.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click=" szjl">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CropView",
  data() {
    return {
      //2.属性定义
      plantations:[],
      tableData:[],
      total:0,
      size:3,
      current:1,
      formInline:{},
      form:{strtus:'0',isquality:'0'},
      form1:{},
      form2:{},
      pids:[],
      uids:[],
      pmid:[],
      areaIds:[0,0,0],
      options:[],
      imageUrl:'',
      imageUrl1:'',
      props:{
        value:'id',
        label:'name',
        children:'children'
      },
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2:false,
      formLabelWidth: "120px",

    }
  }, methods: {
    getplantion()
    {
      this.axios.post("/service/plist").then(res=>{
        this.plantations = res.data.data;
      })
    },
    //3.自定义函数
    list(){
      this.axios.post("/service/list?current="+this.current+"&size="+this.size,this.formInline).then(res=>{
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    } ,
    gopage(current){
      this.current = current;
      this.list();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.img = res;
    },
    handleAvatarSuccess1(res, file) {
      this.imageUrl1 = URL.createObjectURL(file.raw);
      this.form2.recordsImg = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    plantation(){
      this.axios.post("/service/plist").then(res=>{
        this.pids = res.data.data;
        console.log(this.pids)
      })
    },
    getUser(){
      this.axios.post("/service/ulist").then(res=>{
        this.uids = res.data.data;
      })
    },
    openAdd(){
      this.dialogFormVisible=true;
      this.form={status:'0',isquality:'1'}
      this.list()
    },
    openAdd2(cropId){
      this.form2={};
      this.form2.cropId=cropId;
      this.imageUrl1='';
      this.dialogFormVisible2=true;
    } ,
    getchange(id) {
      console.log(id);
      if (id.length > 0) {
        this.form.provinceId = id[0];
        this.form.cityId = id[1];
        this.form.areaId = id[2];
      } else {
        this.form.provinceId = '';
      }
    },
    gettype()
    {
      this.axios.post("/service/gettype1").then(res=>{
        this.options=res.data.data

      })
    },
    getpm(){
      this.axios.post("/service/pmlist").then(res=>{
        this.pmid=res.data.data
      })
    },
    add(){
    this.axios.post("/service/add",this.form).then(res=>{
      if (res.data.code==200){
        this.$message.success(res.data.msg)
        this.dialogFormVisible = false;
        this.list();
      }else {
        this.$message.error(res.data.msg)
      }
    })
    },
    handleClick(row){

      this.imageUrl=row.img;
      this.areaIds=[]
      this.form1=row;
      if(row.provinceId){
        this.areaIds.push(row.provinceId,row.cityId,row.areaId)
      }
      console.log(this.areaIds)
     this.axios.post("/service/hx?cropId="+row.cropId).then(res=>{
       this.form1=res.data.data
     })
      this.dialogFormVisible1 = true;
    },
    upload(){
      this.axios.post("/service/updata",this.form1).then(res=>{
        if (res.data.code){
          this.$message.success(res.data.msg)
          this.dialogFormVisible1 = false;
          this.list();
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
    excels(){
    window.location.href=this.axios.defaults.baseURL+"service/excels"
    },
    dr(){
      window.location.href=this.axios.defaults.baseURL+"service/dr"
    },
    szjl(){
      this.axios.post("/service/szjl",this.form2).then(res=>{
        if (res.data.code==200){
          this.$message.success(res.data.msg)
          this.dialogFormVisible2 = false;
          this.list();
        }else{
          this.$message.error(res.data.msg)
        }
      })
    }
  }, created() {
    //4.钩子函数
    this.getplantion();
    this.list();
    this.plantation();
    this.getUser();
    this.gettype();
    this.getpm();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>